<template>
  <div>
    <van-nav-bar title="" left-text="返回" fixed left-arrow @click-left="onClickLeft" />
    <div class="title">
      <h2>{{ cinemaData.cinemaName }}</h2>
      <div>{{ cinemaData.address }}</div>
    </div>
    <div class="box">
      <span class="x">新人专享</span>
      <span class="t">新人特惠，名额有限抢完即止</span>
      <span class="j"><van-icon name="arrow" /></span>
    </div>
    <div class="info">
      <ul class="swipe" :style="move" @touchmove="mo">
        <li v-for="(item, index) in data" :class="select === index ? 'select' : 'item'">
          <van-image class="img" @click="acvit($event, index, item)" fit="cover" width="4rem" height="5.625rem"
            :src="`https://gw.alicdn.com/${item.poster}`" />
        </li>
      </ul>
    </div>
    <div class="name">
      <h2>{{ action.showName }}</h2>
      <p><van-rate :size="15" v-model="remark" allow-half color="#ffd21e" void-icon="star" void-color="#eee" />{{
        action.remark
      }}</p>
    </div>
    <van-tabs class="tabs" v-model="active" :line-width="105" swipeable>
      <van-tab title="今天 12-15">
        <van-notice-bar :scrollable="false" text="温馨提示:开场前15分钟关闭在线售票" />
        <div class="body">
          <van-divider dashed class="div">上午场</van-divider>
          <div class="time">
            <div class="one">
              <div class="o">10:30</div>
              <div>12:14 散场</div>
            </div>
            <div class="two">
              <div class="o">国语 3D</div>
              <div>三号厅</div>
            </div>
            <div class="three">
              <div class="p">¥18.8</div>
              <div class="s">¥50</div>
              <div class="x">新人专享</div>
            </div>
              <van-button plain type="danger" class="file" size="mini">购买</van-button>
          </div>
          <van-divider dashed>下午场</van-divider>
          <div class="time">
            <div class="one">
              <div class="o">13:30</div>
              <div>12:14 散场</div>
            </div>
            <div class="two">
              <div class="o">国语 3D</div>
              <div>三号厅</div>
            </div>
            <div class="three">
              <div class="p">¥28.8</div>
              <div class="s">¥50</div>
              <div class="x">新人专享</div>
            </div>
              <van-button plain type="danger" class="file" size="mini">购买</van-button>
          </div>
          <div class="time">
            <div class="one">
              <div class="o">17:30</div>
              <div>12:14 散场</div>
            </div>
            <div class="two">
              <div class="o">国语 3D</div>
              <div>三号厅</div>
            </div>
            <div class="three">
              <div class="p">¥38.8</div>
              <div class="s">¥50</div>
              <div class="x">新人专享</div>
            </div>
              <van-button plain type="danger" class="file" size="mini">购买</van-button>
          </div>
        </div>
      </van-tab>
      <van-tab title="明天 12-16">
        <div class="body">
          <van-divider dashed class="div">下午场</van-divider>
          <div class="time">
            <div class="one">
              <div class="o">13:30</div>
              <div>12:14 散场</div>
            </div>
            <div class="two">
              <div class="o">国语 3D</div>
              <div>三号厅</div>
            </div>
            <div class="three">
              <div class="p">¥28.8</div>
              <div class="s">¥50</div>
              <div class="x">新人专享</div>
            </div>
              <van-button plain type="danger" class="file" size="mini">购买</van-button>
          </div>
          <div class="time">
            <div class="one">
              <div class="o">17:30</div>
              <div>12:14 散场</div>
            </div>
            <div class="two">
              <div class="o">国语 3D</div>
              <div>三号厅</div>
            </div>
            <div class="three">
              <div class="p">¥38.8</div>
              <div class="s">¥50</div>
              <div class="x">新人专享</div>
            </div>
              <van-button plain type="danger" class="file" size="mini">购买</van-button>
          </div>
          <van-divider dashed>晚上场</van-divider>
          <div class="time">
            <div class="one">
              <div class="o">20:30</div>
              <div>12:14 散场</div>
            </div>
            <div class="two">
              <div class="o">国语 3D</div>
              <div>三号厅</div>
            </div>
            <div class="three">
              <div class="p">¥28.8</div>
              <div class="s">¥50</div>
              <div class="x">新人专享</div>
            </div>
              <van-button plain type="danger" class="file" size="mini">购买</van-button>
          </div>
          <div class="time">
            <div class="one">
              <div class="o">23:30</div>
              <div>12:14 散场</div>
            </div>
            <div class="two">
              <div class="o">国语 3D</div>
              <div>三号厅</div>
            </div>
            <div class="three">
              <div class="p">¥38.8</div>
              <div class="s">¥50</div>
              <div class="x">新人专享</div>
            </div>
              <van-button plain type="danger" class="file" size="mini">购买</van-button>
          </div>
        </div>
      </van-tab>
      <van-tab title="后天 12-17">
        <div class="body">
          <van-divider dashed>晚上场</van-divider>
          <div class="time">
            <div class="one">
              <div class="o">20:30</div>
              <div>12:14 散场</div>
            </div>
            <div class="two">
              <div class="o">国语 3D</div>
              <div>三号厅</div>
            </div>
            <div class="three">
              <div class="p">¥28.8</div>
              <div class="s">¥50</div>
              <div class="x">新人专享</div>
            </div>
              <van-button plain type="danger" class="file" size="mini">购买</van-button>
          </div>
          <div class="time">
            <div class="one">
              <div class="o">23:30</div>
              <div>12:14 散场</div>
            </div>
            <div class="two">
              <div class="o">国语 3D</div>
              <div>三号厅</div>
            </div>
            <div class="three">
              <div class="p">¥38.8</div>
              <div class="s">¥50</div>
              <div class="x">新人专享</div>
            </div>
              <van-button plain type="danger" class="file" size="mini">购买</van-button>
          </div>
        </div>
      </van-tab>
      <van-tab title="周五 12-18">
        <div class="body">
          <van-divider dashed class="div">上午场</van-divider>
          <div class="time">
            <div class="one">
              <div class="o">10:30</div>
              <div>12:14 散场</div>
            </div>
            <div class="two">
              <div class="o">国语 3D</div>
              <div>三号厅</div>
            </div>
            <div class="three">
              <div class="p">¥18.8</div>
              <div class="s">¥50</div>
              <div class="x">新人专享</div>
            </div>
              <van-button plain type="danger" class="file" size="mini">购买</van-button>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import http from '../../request/index'

export default {
  name: 'CinemaTotal',
  computed: {
    ...mapState(['cinemaData']),

    remark: {
      get() {
        return this.action.remark - 5
      },
      set(v) {
        this.remark = v
      }
    }
  },
  data() {
    return {
      data: [],
      select: 0,
      move: {},
      action: {},
      active: 0
    }
  },
  methods: {
    ...mapMutations(['change']),

    onClickLeft() {
      this.$router.back()
    },
    acvit(event, index, item) {
      this.action = item
      const start = document.body.offsetWidth / 2
      const el = event.pageX - event.layerX + 35.2
      const max = event.path[3].offsetWidth - start
      let move = -(- start)
      if (el <= start) {
        move = 0
      } else if (el >= max) {
        move = -(max - start)
      } else {
        move = -(el - start)
      }
      this.select = index
      this.move = { 'transform': `translateX(${move}px)` }
    },
    mo() {
      this.move = { 'transform': `none` }
    }
  },
  created() {
    this.change({name: 'footer', data: false})
    http('/cinema_detail', this).then(res => {
      if (res.data.data.returnCode === '0') {
        this.data = res.data.data.returnValue.shows
        this.action = this.data[0]
      }
      console.log(res);
    }).catch(err => console.log(err))
  },
  beforeDestroy() {
    this.change({name: 'footer', data: true})
  }
}
</script>

<style lang='less' scoped>
.title {
  margin-top: (46/16rem);
  padding-left: (15/16rem);
  font-size: (13/16rem);
  color: #666;

  h2 {
    font-size: 1rem;
    font-weight: 700;
    line-height: (25/16rem);
    color: #333;
  }
}

.box {
  margin-top: (15/16rem);
  border-top: 1px solid #ededed;
  padding: (15/16rem);
  font-size: (12/16rem);
  color: #808080;

  .x {
    background-color: #ff8625;
    color: #fff;
    padding: 1px;
  }

  .t {
    margin-left: (5/16rem);
    margin-right: (110/16rem);
  }
}

.info {
  height: (120/16rem);
  background-image: url(../../../static/images/mbg.png);
  display: flex;
  align-items: flex-end;
  overflow: auto;
  position: relative;
  // transform:none

  .swipe {
    position: absolute;
    display: flex;
    padding: 0 (5/16rem);
    transition: all 1s;

    // justify-content: space-evenly;
    .item {
      display: flex;
      text-align: center;
      padding: 0 (5/16rem);

      // margin-left: (10/16rem);
      .img {
        transition: all 1s;
        // width: ;
      }
    }
  }
}

.select {
  display: flex;
  text-align: center;
  padding: 0 (5/16rem);

  .img {
    border: 1px solid #fff;
    transform: scale(1.1);
    transition: all 1s;
  }
}

.name {
  margin-top: (10/16rem);
  padding-bottom: (10/16rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: (13/16rem);
  color: #9c9c9c;

  h2 {
    font-size: 1rem;
    color: #333;
  }
}

.div {
  margin: 0;
}

.body {
  padding: 0 (15/16rem);
  .time {
    padding: (15/16rem);
  display: flex;
  align-items: center;
  .one {
    white-space:nowrap;
    width: (58/16rem);
    font-size: (12/16rem);
    color: #999;
    .o {
      font-size: (18/16rem);
      font-weight: 700;
      color: #333;
    }
  }
  .two {
    line-height: (20/16rem);
    margin-left: (15/16rem);
    font-size: (12/16rem);
    color: #999;
    .o {
    width: (50/16rem)
    }
  }
  
  .three {
    margin-left: (80/16rem);
    font-size: (12/16rem);
    color: #999;
    .p {
      font-size: (18/16rem);
      color: #fd2c23;
      font-weight: 700;
    }
    .s {
      text-decoration: line-through;

    }
    .x {
      width: (50/16rem);
      background-color: #ff8625;
      color: #fff;
      padding: 1px;
    }
  }
  .file {
    margin-left: (20/16rem);
    width: (45/16rem);
  }
}
}

</style>